<template>
	<div id="G-loading5" class="comloading" v-show="loadshow">
		<div class="loading-wrap">
			<div class="loading">
				<i class="iconfont icon-maikefeng"></i>
				<ul class="load-move">
					<li class="load-item load-item1"></li>
					<li class="load-item load-item2"></li>
					<li class="load-item load-item3"></li>
					<li class="load-item load-item4"></li>
					<li class="load-item load-item5"></li>
				</ul>
			</div>
			<p class="loading-title">{{ tips }}</p>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
//		props:['title'],
		data(){
			return {
				loadshow: false,
				tips: '录音'
			}
		},
		methods:{
			show: function(){
				this.loadshow = true;
			},
			hide: function(){
				this.loadshow = false;
			}
		}
	}
</script>
<style type="text/css" lang="less" scoped>
	ul,li,p{
		padding: 0;
		margin: 0;
	}
	#G-loading5{
		.loading-wrap{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 10rem;
			height: 10rem;
			background: rgba(0,0,0,.4);
			border-radius: 3px;
		}

		.loading{
			position: relative;
			width: 100%;
			height: 10rem;
			>i{
				position: absolute;
				left: 0;
				top: 0;
				width: 50%;
				line-height: 8rem;
				font-size: 5rem;
				color: white;
			}
			.load-move{
				position: absolute;
				right: 0;
				top: 0;
				width: 50%;
				height: 100%;
				box-sizing: border-box;
				padding-top: 1rem;
			}
			.load-item{
				margin: .6rem auto;
				height: .5rem;
				background: white;
				animation: loading 1s infinite ease-in-out;
				animation-fill-mode: both;
			}
			.load-item1{width:3rem;}
			.load-item2{animation-delay: -.25s;width:2.5rem;}
			.load-item3{animation-delay: -.5s;width:2rem;}
			.load-item4{animation-delay: -.75s;width:1.5rem;}
			.load-item5{animation-delay: -1s;width:1rem;}
			
			@keyframes loading {
			  	0%{opacity: 0}
			  	80%{opacity: 1}
				100%{opacity: 1}
			}
		}
		.loading-title{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 3rem;
			line-height: 3rem;
			text-align: center;
			color: white;
			font-size: 18px;
		}
	}
</style>